<template>
	<view class="ns-goods-item-box">
		<view class="ns-goods-item" v-for="(item,index) in value" :key="index" @click="toDetail(item)">
			<view class="image-box">
				<image :src="$util.img(item.sku_image, { size: 'mid' })" mode="aspectFill" @error="imageError(index)"></image>
			</view>
			
			<!-- 商品名称 -->
			<block v-if="showInfor.isShowGoodName">
				<view :class="showInfor.isShowGoodSubTitle?'good-name1':'good-name'" v-if="item.goods_name">
					<text :class="showInfor.isShowGoodSubTitle?'name-hidden-two':'name-hidden-one'">{{item['goods_name']}}</text>
				</view>
				<view :class="showInfor.isShowGoodSubTitle?'good-name1':'good-name'" v-else>
					<text :class="showInfor.isShowGoodSubTitle?'name-hidden-two':'name-hidden-one'">{{item['sku_name']}}</text>
				</view>
			</block>
			
			<!-- 副标题 -->
			<block v-if="showInfor.isShowGoodSubTitle">
				<view class="goods-sub-name" v-if=" item.introduction != '' ">
					<text>{{item.introduction}}</text>
				</view>
			</block>
			
			<view class="mail ns-text-color ns-border-color" v-if="item.is_free_shipping || (addonIsExit.discount && item.promotion_type == 1)">
				<view v-if="item.is_free_shipping" class="ns-gradient-diy-goods-list ns-text-color" :data-theme="themeStyle">免运费</view>
				<view v-if="addonIsExit.discount && item.promotion_type == 1" class="ns-gradient-diy-goods-list ns-text-color" :data-theme="themeStyle">限时折扣</view>
			</view>
			
			<view class="price-info" v-if="type=='default'">
				<block v-if="item.promotion_type == 1 ">
					<block v-if="item.member_price>0">
						<view class="price-top">
							<view class="top-left">
								<text class="unit">￥</text>
								<text class="price">{{item.discount_price}}</text>
								<image :src="$util.img('upload/uniapp/index/discount.png')"></image>
							</view>
							<text class="sale_num ns-margin-left" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{item.member_price}}</text>
								<image :src="$util.img('upload/uniapp/index/VIP.png')"></image>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color"  v-if="showInfor.isShowCart == 1"></text>
							<text class="sale_num" v-else-if="showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
					</block>
					<block v-else>
						<view class="price-top">
							<text>
								<text class="unit">￥</text>
								<text class="price">{{item.price}}</text>
							</text>
							<text class="sale_num ns-margin-left" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{item.discount_price}}</text>
								<image :src="$util.img('upload/uniapp/index/discount.png')"></image>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color"  v-if="showInfor.isShowCart == 1"></text>
							<text v-else-if="showInfor.isShowGoodSaleNum" class="sale_num">{{item.sale_num}}人付款</text>
						</view>
					</block>
				</block>
				<block v-else>
					<block v-if="item.member_price>0">
						<view class="price-top">
							<text>
								<text class="unit">￥</text>
								<text class="price">{{item.price}}</text>
							</text>
							<text class="sale_num ns-margin-left" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{item.member_price}}</text>
								<image :src="$util.img('upload/uniapp/index/VIP.png')"></image>
							</view>
							<text class="add iconfont iconadd-fill ns-text-color"  v-if="showInfor.isShowCart == 1"></text>
							<text class="sale_num" v-else-if="showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
					</block>
					<block v-else>
						<view class="price-top" v-if="(item.market_price>0 && showInfor.isShowMarketPrice) || (showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum)">
							<text class="line-through" v-if="item.market_price>0 && showInfor.isShowMarketPrice">
								<text class="unit">￥</text>
								<text class="price">{{item.market_price}}</text>
							</text>
							<text class="sale_num ns-margin-left" v-if="showInfor.isShowCart == 1 && showInfor.isShowGoodSaleNum">{{item.sale_num}}人付款</text>
						</view>
						<view class="price-bottom">
							<view class="bottom-left">
								<text class="unit ns-text-color">￥</text>
								<text class="price ns-text-color">{{item.price}}</text>
							</view>
							
							<text class="add iconfont iconadd-fill ns-text-color"  v-if="showInfor.isShowCart == 1"></text>
							<text v-else-if="showInfor.isShowGoodSaleNum" class="sale_num">{{item.sale_num}}人付款</text>
						</view>
					</block>
				</block>
			</view>
			<view class="fenxiaoMarket-price" v-if="type == 'fenxiaoMarket'">
				<view class="price ns-text-color">{{ item.commission_money }}</view>
				<view class="earn-price ns-text-color ns-gradient-promotionpages-pintuan-payment" :data-theme="themeStyle"><text class="iconfont iconfenxiang1"></text> 赚￥{{ item.commission_money }}</view>
			</view>
			
			<view class="topicList-price" v-if="type == 'topicsList'">
				<view class="item-through-price">{{ $lang('common.currencySymbol') }}{{ item.price }}</view>
				<view class="item-bottom">
					<view class="item-price ns-text-color">{{ $lang('common.currencySymbol') }}{{ item.topic_price }}</view>
					<view class="buy-btn ns-bg-color">立即购买</view>
				</view>
			</view>
		</view>
	</view> 
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import category from "@/components/diy-goods-level-category/diy-goods-level-category.js"
	export default {
		name: 'ns-goods-item-row',
		props: {
			value: {								//循环商品列表
				type: Array,
			},
			type: {									//商品类型
				type: String,
				default: 'default'
			},
			showInfor:{								//商品需要展示的字段
				type: Object,
				default () {
					return {
						isShowCart:false,					//加入购物车按钮
						isShowGoodName: 1,				//是否展示商品名称
						isShowGoodSaleNum: 1,			//是否展示售卖数量
						isShowGoodSubTitle: 0,			//是否展示副标题
						isShowMarketPrice: 1,			
					}
				}
				
			}
		},
		mixins: [globalConfig],
		data() {
			return {};
		},
		created() {
		},
		methods: {
			toDetail(e){
				this.$emit('toDetail',e)
			},
			imageError(index) {
				this.value[index].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss">
	// 瀑布流
	// .ns-goods-item-box {
	// 	width: 100vw;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	padding: 20rpx;
	// 	box-sizing: border-box;
	// }
	
	// .ns-goods-item {
	// 	width: calc(50% - 10rpx);
	// 	margin-right: 18rpx;
	// 	margin-bottom: 20rpx;
	// 	background: #ffffff;
	// 	padding: 20rpx;
	// 	box-sizing: border-box;
	// 	border-radius: 10rpx;
	
	// 等高
	.ns-goods-item-box {
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.ns-goods-item {
		width: calc(50% - 10rpx);
		// height: 550rpx;
		margin-right: 18rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		
		// &:last-child{
		// 	margin-bottom: 0;
		// }

		.image-box {
			width: 306rpx;
			height: 306rpx;
			margin-bottom: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.good-name {
			width: 100%;
			height: 64rpx;

			.name-hidden-one{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: $ns-font-size-base;
				line-height: 1.4;
			}
		}
		.good-name1{
			width: 100%;
			.name-hidden-two{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: $ns-font-size-base;
			}
		}
		
		.goods-sub-name{
			width: 100%;
			// height: 54rpx;
			text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: $ns-font-size-x-sm;
				line-height: 1.4;
				color: #838383;
			}
		}

		.mail {
			width: 100%;
			height: 26rpx;
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			view {
				line-height: 1;
				border: 1px solid #fff;
				font-size: $ns-font-size-x-sm;
				padding: 2rpx 4rpx;
				border-radius: 4rpx;
				margin-right: 11rpx;
			}
		}
		
		.price-info {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 75rpx;
			margin-top: 10rpx;
			line-height: 1;
			text{
				line-height: 1;
			}
			.price-top{
				width: 100%;
				display: flex;
				align-items: flex-end;
				height: 50rpx;
				image {
					width: 56rpx;
					height: 22rpx;
					margin-left: 6rpx;
					display: block;
				}
				.unit{
					font-size: $ns-font-size-sm;
					color:#777
				}
				.price{
					font-size: $ns-font-size-sm;
					color:#777
				}
				.sale_num{
					font-size: $ns-font-size-x-sm;
				}
			}
			.price-bottom{
				width: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				height: 50rpx;
				image {
					width: 56rpx;
					height: 22rpx;
					margin-left: 6rpx;
					display: block;
				}
				.unit{
					font-size: $ns-font-size-sm;
				}
				.price{
					font-size: $ns-font-size-lg;
					// font-weight: 500;
				}
				.sale_num{
					font-size: $ns-font-size-x-sm;
				}
			}
			.line-through{
				text-decoration: line-through;
			}
			.bottom-left,.top-left{
				display: flex;
				align-items: center;
			}
			.add{
				font-size: 40rpx;
			}
		}
	}
	
	.fenxiaoMarket-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 70rpx;
		.price {
			font-size: $ns-font-size-lg;
			line-height: 1;
		}
		.earn-price {
			line-height: 1;
			font-size: $ns-font-size-sm;
			padding: 4rpx 10rpx;
			border-radius: 4rpx;
			text {
				font-size: $ns-font-size-sm;
				margin-right: 10rpx;
			}
		}
	}
	
	.topicList-price{
		padding-top: 27rpx;
		.item-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.buy-btn{
				padding: 10rpx 12rpx;
				text-align: center;
				color: #fff;
				font-size: $ns-font-size-x-sm;
				border-radius: 100rpx;
				line-height: 1;
			}
			.item-price{
				line-height: 1;
				font-size: $ns-font-size-lg;
			}
		}
		.item-through-price{
			font-size: $ns-font-size-sm;
			border-radius: 5rpx;
			text-decoration: line-through;
			color: #777777;
			line-height: 1;
		}
	}

	.ns-goods-item:nth-child(2n) {
		margin-right: 0;
	}

	// .ns-goods-item:nth-last-child(1) {
	// 	margin-bottom: 0;
	// }

	// .ns-goods-item:nth-last-child(2) {
	// 	margin-bottom: 0;
	// }
</style>
